<template>
  <div class="node-footer" :class="{ 'node-footer-pc': equ === 'pc' }">
    <div class="prev" @click="changePage('prev')">
      <img class="icons" src="@/assets/icons/h5/prev_node.png" v-if="position !== 0" />
    </div>
    <div class="next" @click="changePage('next')">
      <img class="icons" src="@/assets/icons/h5/next_node.png" v-if="position + 1 !== menuLength" />
    </div>
  </div>
</template>

<script lang="ts" setup  name="NodeFooter">
import { useTreeStore } from '@/store/tree';
import { equ } from '../../../../package-env'

const treeStore = useTreeStore()
const menuLength = ref(treeStore.menuData.length)
const position = computed(() => treeStore.chapter)

const changePage = (type) => {
  treeStore.goParentNode(type)
}
</script>

<style lang="scss" scoped>
.node-footer {
  @apply flex justify-between items-center;
  margin-top: 12px;

  .icons {
    @apply inline-block;
    margin: 0 2px;
    width: 162px;
    height: 30px;
  }

  .prev {
    cursor: pointer;
    width: 50%;
    // padding-left: 13.5px;
    background: linear-gradient(90deg, rgba(55, 183, 255, 0.19), rgba(55, 183, 255, 0.19), rgba(7, 39, 46, 0.13));

    &:active {
      opacity: 0.45;
    }
  }

  .next {
    cursor: pointer;
    width: 50%;
    text-align: right;
    // padding-right: 13.5px;
    background: linear-gradient(270deg, rgba(55, 183, 255, 0.19), rgba(55, 183, 255, 0.19), rgba(7, 39, 46, 0.13));

    &:active {
      opacity: 0.45;
    }
  }

  &-pc {
    .icons {
      width: 162px;
      height: 35px;
    }
  }

  .not-allow {
    opacity: 0.6;

    &:active {
      opacity: 0.6;
    }
  }
}
</style>